<script setup lang="ts">
import {
  LogoutOutlined,
  ProfileOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { useUserStore } from "@/stores";
import { Modal } from "ant-design-vue";
import { useRouter } from "vue-router";
const { avatar, nickName } = storeToRefs(useUserStore());
const router = useRouter();

const logout = () => {
  Modal.confirm({
    title: "温馨提示",
    content: "你确认退出HRSASS中后台系统吗?",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      // removeToken()
      // removeUserInfo()
      router.push("/login");
    },
  });
};
</script>

<template>
  <a-dropdown>
    <span
      hover="bg-[var(--hover-color)]"
      flex
      items-center
      h-48px
      px-12px
      cursor-pointer
      class="transition-all-300"
    >
      <a-avatar :src="avatar" mr-8px size="small" />
      <span class="anticon">{{ nickName }}</span>
    </span>
    <template #overlay>
      <a-menu>
        <a-menu-item key="0">
          <template #icon>
            <UserOutlined />
          </template>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://www.alipay.com/"
          >
            个人中心
          </a>
        </a-menu-item>
        <a-menu-item key="1">
          <template #icon>
            <ProfileOutlined />
          </template>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="http://www.taobao.com/"
          >
            个人设置
          </a>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="3" @click="logout">
          <template #icon>
            <LogoutOutlined />
          </template>
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
